import * as Vue from 'vue'
import * as VueRouter from 'vue-router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

import VueSFC from './components/VueSFC.vue'
import VueTemplate from './components/VueTemplate.vue'
import VueCSSStyle from './components/VueCSSStyle.vue'
import VueUseComponent from './components/VueUseComponent.vue'
import VueComponentWithProps from './components/VueComponentWithProps.vue'
import VueComputedData from './components/VueComputedData.vue'
import VueLifeCircle from './components/VueLifeCircle.vue'

import ElementPlusPlayground from './components/ElementPlusPlayground.vue'
import ElementPlusLayout from './components/ElementPlusLayout.vue'

import DemoCounter from './components/DemoCounter.vue'

import TodoList from './components/TodoList.vue'
import FiveInARow from './components/FiveInARow.vue'
import LifeGame from './components/LifeGame.vue'
import Canvas from './components/Canvas.vue'

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [
    { path: '/', component: App },
    { path: '/vue-sfc', component: VueSFC },
    { path: '/vue-template', component: VueTemplate },
    { path: '/vue-css-style', component: VueCSSStyle },
    { path: '/vue-use-component', component: VueUseComponent },
    { path: '/vue-use-component-with-props', component: VueComponentWithProps },
    { path: '/vue-computed-data', component: VueComputedData },
    { path: '/vue-life-circle', component: VueLifeCircle },

    { path: '/elements-playground', component: ElementPlusPlayground },
    { path: '/elements-layout', component: ElementPlusLayout },

    { path: '/demo', component: DemoCounter },

    { path: '/todo-list', component: TodoList },
    { path: '/five-in-a-row', component: FiveInARow },
    { path: '/life-game', component: LifeGame },
    { path: '/canvas', component: Canvas }
  ]
})

const app = Vue.createApp({})
app.use(router)
app.use(ElementPlus)
app.mount('#app')
